<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="80%" height="80%" draggable>
    <div>
      <el-card shadow="never">
        <listView :list="sum" />
        <el-table v-loading="loading" :data="advertiserEverydayCostList">
          <el-table-column label="时间" fixed prop="thatdayHoursDate" minWidth="160"></el-table-column>
          <el-table-column label="账户消耗" prop="cost" width="120" sortable></el-table-column>
          <el-table-column label="新增充值" prop="thatdayTotalAmount" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.thatdayRegisterTotalAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增分成金额" prop="thatdayDividendAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.thatdayRegisterDividendAmount) }}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column label="新增广告收益" prop="iaaTotalAmount" width="140" sortable>-->
          <!--            <template #default="{ row }">-->
          <!--              <span>{{ formatPrice(row.iaaTotalAmount) }}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="新增广告分成" prop="iaaDividendAmount" width="140" sortable>-->
          <!--            <template #default="{ row }">-->
          <!--              <span>{{ formatPrice(row.iaaDividendAmount) }}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="利润" prop="thatdayProfitAmount" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.thatdayProfitAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回本率" prop="extRecoveryRate" minWidth="120">
            <template #default="{ row }">
              <span>{{ row.extRecoveryRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="展示数" prop="show" width="120" sortable></el-table-column>
          <el-table-column label="平均千次展现费用" prop="avgShowCost" width="170" sortable></el-table-column>
          <el-table-column label="点击数" prop="click" width="120" sortable></el-table-column>
          <el-table-column label="点击成本" prop="avgClickCost" width="120" sortable></el-table-column>
          <el-table-column label="点击率" prop="ctr" width="120" sortable>
            <template #default="{ row }">
              <span>{{ row.ctr }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="转化数" prop="convert" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化成本" prop="convertCost" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化率" prop="convertRate" minWidth="110" sortable>
            <template #default="{ row }">
              <span>{{ row.convertRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="激活数" prop="active" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费人数" prop="thatdayPaidUseNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费次数" prop="thatdayPaidTotalNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费成本" prop="extPayCost" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extPayCost }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客单价" prop="extAvgPrice" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extAvgPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回传率" prop="" minWidth="110">
            <template #default="{ row }"> {{ row.returnRate }}% </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { getHoursCostPage } from '@/api/oce/advertiserEverydayCost';
import { AdvertiserEverydayCostVO } from '@/api/oce/advertiserEverydayCost/types';
import { formatPrice } from '@/utils';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const advertiserEverydayCostList = ref<AdvertiserEverydayCostVO[]>([]);
const loading = ref(true);
const total = ref(0);

const dialog = reactive<DialogOption>({
  visible: false,
  title: '数据消耗时速'
});

const queryParams = ref({
  referralLinkId: undefined,
  thatdayTimestamp: undefined
});
const sum = ref([]);

/** 查询巨量广告主每日消耗记录列表 */
const getList = async () => {
  loading.value = true;
  const res = await getHoursCostPage(queryParams.value);
  advertiserEverydayCostList.value = res.rows;
  sum.value = res.sum || [];
  total.value = res.total;
  loading.value = false;
};
const show = (data) => {
  dialog.visible = true;
  queryParams.value = data;
  getList();
};

defineExpose({ show });
</script>
